<template>
  <div class="paiHang_outside" v-loading="loading">
    <div class="paiHang_container">
      <div class="paiHang_container_header">官方榜</div>
      <div class="guanFang_contaienr_header">
        <div
          class="guanFang_contaienr_header_inside"
          v-for="item in GuanFang"
          :key="item.id"
        >
          <div
            class="guanFang_contaienr_header_inside_left"
            @click="goToGeDanInfo(item.id)"
          >
            <el-image lazy :src="item.coverImgUrl"></el-image>
            <div
              class="guanFang_contaienr_header_inside_left_text"
              :style="{
                left: item.updateFrequency == '每天更新' ? '67px' : '60px',
              }"
            >
              {{ item.updateFrequency }}
            </div>
            <div
              class="paiHang_container_contact_inside_hover"
              style="bottom: 140px; left: 65px"
            >
              <img src="../../../../assets/bofang2.png" />
            </div>
          </div>
          <div class="guanFang_contaienr_header_inside_right">
            <div
              class="guanFang_contaienr_header_inside_right_inside"
              :class="[
                {
                  guanFang_contaienr_header_inside_right_inside_active:
                    index == 1,
                },
                {
                  guanFang_contaienr_header_inside_right_inside_bottom:
                    index == 2,
                },
              ]"
              v-for="(childItem, index) in item.tracks"
              :key="index"
            >
              <div class="right_inside_left">
                <span class="span1">{{ index + 1 }}</span>
                <span class="span2">{{ childItem.first }}</span>
              </div>
              <div class="right_inside_right">
                <span class="span2">{{ childItem.second }}</span>
              </div>
            </div>
            <div
              class="guanFang_contaienr_header_inside_right_many"
              @click="goToGeDanInfo(item.id)"
            >
              <span class="guanFang_contaienr_header_inside_right_many_text"
                >更多详情</span
              >
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="paiHang_container_header">全球榜</div>
      <div class="paiHang_container_contact">
        <div
          class="paiHang_container_contact_inside"
          v-for="item in QuanQiu"
          :key="item.id"
          @click="goToGeDanInfo(item.id)"
        >
          <div class="paiHang_container_contact_inside_img">
            <el-image lazy :src="item.coverImgUrl"></el-image>
            <div
              class="paiHang_container_contact_inside_bofang"
              :style="{
                left:
                  parseInt(item.playCount / 10000).toString().length < 4
                    ? '70px'
                    : '60px',
              }"
            >
              <img src="../../../../assets/bf.png" />
              <span>{{ parseInt(item.playCount / 10000) + "万" }}</span>
            </div>
            <div class="paiHang_container_contact_inside_hover">
              <img src="../../../../assets/bofang2.png" />
            </div>
          </div>
          <div class="allGeDan_container_inside_text">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { toplist, toplistDetail } from "../../../../api/index.js";
export default {
  created() {
    this.loading = true;
    toplist().then((res) => {
      this.QuanQiu = res.list.slice(4, 34);
      toplistDetail().then((res) => {
        this.GuanFang = res.list.slice(0, 4);
        this.loading = false
      });
    });
  },
  data() {
    return {
      loading: false,
      GuanFang: [],
      QuanQiu: [],
    };
  },
  methods: {
    goToGeDanInfo(id) {
      this.$router.push({
        path: "/geDanInfo",
        query: {
          id
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../common/css/commonStyle";

.paiHang_outside {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .paiHang_container {
    width: 95%;

    .paiHang_container_header {
      font-size: 19px;
      font-weight: 800;
      margin-bottom: 20px;
    }

    .guanFang_contaienr_header {
      width: 100%;
      margin-bottom: 30px;

      .guanFang_contaienr_header_inside {
        width: 100%;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

        // height: 30px;
        // background-color: red;
        .guanFang_contaienr_header_inside_left {
          width: 190px;
          height: 190px;
          cursor: pointer;
          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }

          .guanFang_contaienr_header_inside_left_text {
            position: relative;
            font-size: 13px;
            bottom: 60px;
            left: 67px;
            color: white;
          }
          .paiHang_container_contact_inside_hover:hover {
            opacity: 1;
          }

          .paiHang_container_contact_inside_hover {
            opacity: 0;
            transition: opacity 0.5s;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: white;
            @include flex;
            position: relative;
          }
        }

        .guanFang_contaienr_header_inside_right {
          width: 500px;

          // height: 100px;
          // background-color: red;
          .guanFang_contaienr_header_inside_right_inside {
            display: flex;
            justify-content: space-between;
            height: 40px;
            align-items: center;
            background: #f8f8ff;
            margin-bottom: 5px;

            .right_inside_left {
              .span1 {
                color: $wangYiYunColor;
                margin-right: 10px;
              }

              .span2 {
                font-size: 13px;
              }
            }

            .right_inside_right {
              .span2 {
                font-size: 13px;
              }
            }
          }

          .guanFang_contaienr_header_inside_right_inside_active {
            background: white;
          }
          .guanFang_contaienr_header_inside_right_inside_bottom {
            margin-bottom: 15px;
          }

          .guanFang_contaienr_header_inside_right_many {
            @include flex;
            width: 100px;
            height: 30px;
            // background: blue;
            cursor: pointer;
            .guanFang_contaienr_header_inside_right_many_text {
              font-size: 13px;
            }
          }
        }
      }
    }

    .paiHang_container_contact {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .paiHang_container_contact_inside {
        width: 17%;
        // height: 180px;
        //background-color: red;
        margin-bottom: 30px;
        cursor: pointer;

        .paiHang_container_contact_inside_img {
          width: 100%;
          height: 122px;
          margin-bottom: 10px;

          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }

          .paiHang_container_contact_inside_bofang {
            display: flex;
            position: relative;
            bottom: 120px;
            width: 60px;

            span {
              font-size: 12px;
              color: white;
            }
          }

          .paiHang_container_contact_inside_hover:hover {
            opacity: 1;
          }

          .paiHang_container_contact_inside_hover {
            opacity: 0;
            transition: opacity 0.5s;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: white;
            @include flex;
            position: relative;
            bottom: 95px;
            left: 35px;
          }
        }

        .allGeDan_container_inside_text {
          font-size: 14px;
          font-weight: 500;
        }
      }
    }
  }
}</style
>>
